[VS Code] Dartでファイル保存時にセミコロンを自動挿入するフォーマット設定をしてみた

若槻龍太

2023.02.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、Visual Studio Code（VS Code）でDart（Flutter）のコードを編集する際に、ファイル保存時にセミコロン（;）を自動挿入するフォーマット設定をしてみました。

必要な設定

Dartエクステンションの導入

Dartの公式エクステンションをVS Codeにインストールします。

review-details - Dart - Visual Studio Marketplace

これにより、行末尾にセミコロンが付いていない箇所ではExpected to find ';'.という構文エラーが出るようになります。

settings.json作成

.vscode/settings.jsonが未作成の場合は作成します。

mkdir .vscode
touch .vscode/settings.json

settings.jsonに次のいずれかの記述を追加します。

{
  "[dart]": {
    "editor.codeActionsOnSave": {
      "quickfix.insertSemicolon": true,
    }
  }
}

//もしくは
{
  "[dart]": {
    "editor.codeActionsOnSave": {
      "quickfix.insertSemicolon": true,
    }
  }
}

後者の記述はDartのコードにのみ設定を適用することができます。

これによりDartのコードを編集する際に、ファイル保存時にセミコロン（;）が自動挿入されるようになります。

補足

セミコロンが自動挿入されないパターン

下記のMyApp({super.key})のようにクラス初期化の行では、自動でセミコロンが挿入されません。

class MyApp extends StatelessWidget {
  const MyApp({super.key})

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: generateRoute,
      initialRoute: '/',
    );
  }
}

A function body must be provided. Try adding a function body.とあるように関数の記述が不足していると判断されるためです。